<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>湖外湖点餐系统</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <meta name="description" content="Portfolio Zoom Slider with jQuery" />

        <meta name="keywords" content="jquery, plugin, slider, zoom, portfolio, cloud-zoom"/>

		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

		<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />

		<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />

		<script src="js/cufon-yui.js" type="text/javascript"></script>

		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
		
 <style type="text/css">
    body{
		 
		margin: 0px;
		padding: 0px;
		font-size: 12px;
		font-family: Arial;
	 
      }
	  #container{
		width: 1368px;
		background: #f2f2f2;
		text-align: left;
		margin: 0px auto;

	  }
	  #hyh-bestup{
		  margin: 0px;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #444444;
	  }
	  #hyh-bestup-down1{
		  margin: 0px ;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down2{
		  margin:0px;
		  padding:0px;
		  height:42px;
		  line-height:42px;
	  }
	  #hyh-bestup-down3{
		  margin: 5px 90px 5px 0px ;
		  padding: 0px;
		  width:180px;
		  height:37px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down1 li,#hyh-bestup-down1 li a{
		  float:left;
		  line-height: 42px;
		  display: block;
		  text-align:center;
		  width:100px;
		  margin-left:140px;
		  padding:0px;
		  font-size:14px;
		  list-style-type: none;
		  text-decoration:none;
		  color:#FFF;
	  }
	  #hyh-bestup-down1 ul li a:hover{
		  color:#a6a6a6;
		  text-decoration:blink;
	  }
	  
	  #clear{
		  width:1368px;
		  height:0px;
		  clear:both;
	  }
	  #footer_line{
		  width:1268px;
		  border: 1px solid #b2b2b2;
		  margin:20px 100px 2px 100px;
		  padding:0px;
		  float:left;
		  clear:both;
	  }
	  #footer{
		  width:1368px;
		  height:12px;
		  margin:5px 100px;
		  float: left;
		  clear: both;
	  }
	  #footer_left{
		  width:230px;
		  height:12px;
		  margin:0px;
		  padding:3px;
		  float:left;
		  clear:both;
	  }
	  #footer_right{
		  width:800px;
		  height:14px;
		  margin:0px;
		  padding:0px;
		  float:left;
	  }
 </style> 


		<script type="text/javascript">

			Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});

			

			Cufon.replace('.footer');

		</script>

    </head>

    <body>
    <div id="container">
	<div id="hyh-bestup">
    </div>
    <div id="hyh-bestup-down1">
	<ul>
		<div id="hyh-bestup-down3">
		<li><a href="own.html"><img src="images/hyh_text.png"></a></li>
		</div>
        <div id="hyh-bestup-down2">
		<li><a href="everybody.html">大众登录</a></li>
		<li><a href="#">VIP登录</a></li>
		<li><a href="#">关于我们</a></li>
        </div>
	</ul>
    </div>
   
    


		<div class="wrapper">

		    <div id="content" class="content">

				<div class="item">

					<div class="thumb_wrapper">

						<div class="thumb">

							<ul>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/songshu.png"><img src="images/thumbs/songshu.png" alt="Formstack 1"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/songshu.png"><img src="images/thumbs/songshu.png" alt="Formstack 2"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/songshu.png"><img src="images/thumbs/songshu.png" alt="Formstack 3"/></a></li>

							</ul>

						</div>

						<a class="prev" href="#"></a>

						<a class="next" href="#"></a>

						

					</div>

					<div class="description">

						<h2 >松鼠鳜鱼</h2>

						<p>"松鼠鳜鱼"是江苏苏州地区的汉族传统名菜，属苏菜系。在江南各地一直将其列作宴席上的上品佳肴。用鳜鱼制菜各地早有，一般以清蒸或红烧为主，而制做形似松鼠的鳜鱼菜肴则首先是苏州地区。相传清代乾隆皇帝下江南时，曾微服至苏州松鹤楼菜馆用膳，厨师用鲤鱼出骨，在鱼肉上刻花纹，加调味稍腌后，拖上蛋黄糊，入热油锅嫩炸成熟后，浇上熬热的糖醋卤汁，形状似鼠，外脆里嫩，酸甜可口。</p>

                       


					</div>

				</div>
			</div>	

        </div>
				
				

				



				

		

		



		<!-- The JavaScript -->

		<script src="http://www.jq22.com/jquery/jquery-1.6.2.js"></script>

		<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

		<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>

		<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

		<script type="text/javascript">

			$(function() {

				/*

				fancybox init on each cloud-zoom element

				 */

				$("#content .cloud-zoom").fancybox({

					'transitionIn'	:	'elastic',

					'transitionOut'	:	'none',

					'speedIn'		:	600,

					'speedOut'		:	200,

					'overlayShow'	:	true,

					'overlayColor'	:	'#000',

					'cyclic'		:	true,

					'easingIn'		:	'easeInOutExpo'

				});



				/*

				because the cloud zoom plugin draws a mousetrap

				div on top of the image, the fancybox click needs

				to be changed. What we do here is to trigger the click

				the fancybox expects, when we click the mousetrap div.

				We know the mousetrap div is inserted after

				the <a> we want to click:

				 */

				$("#content .mousetrap").live('click',function(){

					$(this).prev().trigger('click');

				});



				/*

				the content element;

				each list item / group with several images

				 */

				var $content	= $('#content'),

				$thumb_list = $content.find('.thumb > ul');

				/*

				we need to set the width of each ul (sum of the children width);

				we are also defining the click events on the right and left arrows

				of each item.

				 */

				$thumb_list.each(function(){

					var $this_list	= $(this),

					total_w		= 0,

					loaded		= 0,

					//preload all the images first

					$images		= $this_list.find('img'),

					total_images= $images.length;

					$images.each(function(){

						var $img	= $(this);

						$('<img/>').load(function(){

							++loaded;

							if (loaded == total_images){

								$this_list.data('current',0).children().each(function(){

									total_w	+= $(this).width();

								});

								$this_list.css('width', total_w + 'px');



								//next / prev events



								$this_list.parent()

								.siblings('.next')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == $this_list.children().length -1) return false;

									var	next	= ++current,

									ml		= -next * $this_list.children(':first').width();



									$this_list.data('current',next)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								})

								.end()

								.siblings('.prev')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == 0) return false;

									var	prev	= --current,

									ml		= -prev * $this_list.children(':first').width();



									$this_list.data('current',prev)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								});

							}

						}).attr('src',$img.attr('src'));

					});

				});

			});

        </script>

    </body>

</html>